<template>
	<div class="app-container">
		<div class="content">
			<nextnav :navnum='navnum'></nextnav>
			<div class="information">
				<p>{{list.batchName}}<span v-if="list.isReward" class="add">附加</span></p>
				<div class="information_cont">
					<div class="information_top">
						<p>
							<span class="textname">保险公司：</span>
							<span class="textmodel">{{list.insuranceName}}</span>
						</p>
						<p>
							<span class="textname">有效日期：</span>
							<span class="textmodel">{{list.effectiveDate}}</span>
							<span class="textname">到</span>
							<span class="textmodel" v-if="list.expiryDate">{{list.expiryDate}}</span>
							<span class="textmodel" v-else>不限</span>
						</p>
						<p>
							<span class="textname">匹配日期类型：</span>
							<span class="textmodel">{{list.matchDateType}}</span>
						</p>
					</div>
					<div class="information_top">
						<p>
							<span class="textname">适用公号：</span>
							<span class="textmodel" v-for="(item,index) in list.staffNames">
								{{list.insuranceName}}-{{item.staffAccount}}-({{item.describe}})
							<span class="xian" v-if="index!=list.staffNames.length-1">|</span></span>
						</p>
					</div>
				</div>
			</div>
			<div class="tabnav">
				<p v-for="(item,index) in templateslist" :class="indexs==index?'actives':''" @click="tab(item.id,index)">{{item.name}}</p>
			</div>
			<div class="templates" v-if="actives=='first'">
				<div v-if="historylist.length!=0">
						<div class="search">
							<input type="text" v-model="searchContent" placeholder="请输入批次名称/政策ID/政策信息" />
							<button class='btnsearch' @click="historysearch">搜索</button>
						</div>
						<div class="batchconent">
							<!--<batchtemplete v-for="item in list" :jsonlist="item"></batchtemplete>-->
							<!--<div :is="iscomponents" :class="indexs==index?'activeclass':''" v-for="(item,index) in historylist" :jsonlist="item" :indexnum="index" @chose="choseactive"></div>-->
							<div class="batchconentleft">
								<div class="batch" v-for="(item,index) in historylist" :class="choseindex==index?'activeclass':''" @click="choseactive(item,index)">
									<div class="batch_top">
										<p class="isshow" v-if="item.isTemplate">系统</p>
										<p class="namestext">{{item.batchName}}</p>
										<div class="timeconent">
											<p>
												{{item.effectiveDate_date}}
												<span class="division">{{item.effectiveDate_second}}</span>
											</p>
											<p class="division">到</p>
											<p v-if="item.expiryDate">
												{{item.expiryDate_date}}
												<span class="division">{{item.expiryDate_second}}</span>
											</p>
											<p v-else>不限</p>
										</div>
									</div>
									<div class="batch_bom" @click.stop="go(item)">
										查看
									</div>
									<div class="backgrounds">
		
									</div>
								</div>
							</div>
							</div>
							<div class="paging">
								<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="1" background layout="total,sizes,prev, pager, next, jumper" :page-sizes="[8, 16, 24, 32]" :page-size="8" :total="total">
								</el-pagination>
							</div>
												
				</div>
				<div v-else class="nodata">
					暂无数据
				</div>
			
			</div>
			<div class="templates" v-else-if="actives=='seconed'">
				<div class="search">
					<input type="text" v-model="search" placeholder="请输入批次名称/政策ID/政策信息" />
					<button class='btnsearch' @click="systemsearch">搜索</button>
				</div>
				<div class="batchconent">
					<div class="batchconentleft">
						<div class="batch" v-for="(item,index) in systemlist" :class="choseindex==index?'activeclass':''" @click="choseactive2(item,index)">
							<div class="batch_top">
								<p class="isshow">系统</p>
								<p class="namestext">{{item.batchName}}</p>
							</div>
							<div class="batch_bom" @click.stop="gomodel(item)">
								查看
							</div>
							<div class="backgrounds">

							</div>
						</div>
					</div>
				</div>
				<div class="paging">
					<!--<el-pagination background :page-size="100" layout="total,prev, pager, next" :total="1000">
   					 </el-pagination>-->
					<el-pagination background @size-change="handleSize" @current-change="handleCurrent" :current-page="1" layout="total,sizes,prev, pager, next, jumper" :page-sizes="[8, 16, 24, 32]" :page-size="8" :total="totals">
					</el-pagination>
				</div>
			</div>
			<div class="btnnext">
				<button @click="prevpage">上一步</button>
				<button class="next" @click="nextpage">下一步</button>
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue'
	import nextnav from './assembly/nextnav'
	export default {
		data() {
			return {
				batchId: "",
				navnum: 1,
				actives: "first",
				indexs: 0,
				templateslist: [{
						name: "使用历史批次作为模板",
						id: "first"
					},
					{
						name: "适用系统模板",
						id: "seconed"
					}
				],
				list: {},
				total: 10,
				totals: 10,
				searchContent: "",
				search: "",
				pageIndex: 1,
				pageSize: 8,
				page: 1,
				size: 8,
				systemlist: [],
				historylist: [],
				iscomponents: "",
				choseindex: null,
				batchType: 1,
				batchTypeId: ""
			}
		},
		mounted() {

			this.batchId = this.$route.query.batchId
			this.getinter()
			this.gethistorylist()
			this.getsystem()
		},
		methods: {
			go(val) {
				if(val.batchType == 0 || val.batchType == 1) {
					this.$router.push({
						name: "policyupCdetail",
						query: {
							batchId: val.id
						}
					})
				} else {
					//							this.$router.push({
					//								name:"policyupper3s",
					//								query:{
					//									batchId:val.id
					//								}
					//							})
				}
			},
			gomodel(val) {
				console.log(val)
				this.$router.push({
					name:"detailsmode",
					query:{
						batchId: this.batchId,
						id:val.id
					}
				})
			},
			handleCurrentChange(val) {
				this.choseindex = null

				this.pageIndex = val
				this.gethistorylist()
			},
			handleSizeChange(val) {
				this.choseindex = null

				this.pageSize = val
				this.gethistorylist()
			},
			//系统模板
			handleSize(val) {
				this.choseindex = null
				this.size = val
				this.getsystem()
			},
			handleCurrent(val) {
				this.choseindex = null
				this.page = val
				this.getsystem()
			},
			//搜索系统模板
			systemsearch() {
				this.getsystem()
			},
			//获取系统模板
			getsystem() {
				let params = {
					policyBatchId: this.batchId,
					pageIndex: this.page,
					pageSize: this.size,
					searchContent: this.search,
				};
				this.post(params, "services/app/policy/GetSystemTemplateList").then(res => {
					console.log("success")
					console.log(res)
					this.systemlist = res.result.items
					//					this.systemlist.unshift({
					//						batchName:"",
					//						id:"",
					//						insuranceName:""
					//					})
					this.totals = res.result.totalCount + 1
				});
			},
			//获取信息
			getinter() {
				let params = {
					id: this.batchId
				};
				this.post(params, "services/app/policy/GetPolicyBatchBasic").then(res => {

					this.list = res.result
				});
			},
			//tab
			tab(val, index) {
				this.actives = val

				this.indexs = index
				this.choseindex = null
				this.batchTypeId = ""
				if(val == "first") {
					this.batchType = 1
				} else {
					this.batchType = ''
				}
			},
			choseactive(val, e) {

				if(this.choseindex == e) {
					this.choseindex = null
					this.batchTypeId = ''
					this.batchType = ''
				} else {
					//batchType
					this.batchType = val.batchType
					this.choseindex = e
					this.batchTypeId = val.id
				}

			},
			choseactive2(val, e) {
				if(e == 0) {
					this.batchType = 0
				} else {
					this.batchType = 2
				}
				if(this.choseindex == e) {
					this.choseindex = null
					this.batchTypeId = ''
					this.batchType = ''
				} else {
					this.choseindex = e
					this.batchTypeId = val.id
				}

			},
			//获取历史批次
			gethistorylist() {
				let params = {
					policyBatchId: this.batchId, //"AFE5BBB3-9E30-46D2-9166-03316C65092D",
					pageIndex: this.pageIndex,
					pageSize: this.pageSize,
					searchContent: this.searchContent

				};
				this.post(params, "services/app/policy/GetHistoryBatchList").then(res => {

					this.historylist = res.result.items

					for(let i = 0; i < this.historylist.length; i++) {
						//effectiveDate
						let effectiveDatearr = this.historylist[i].effectiveDate.split(" ")
						this.historylist[i].effectiveDate_date = effectiveDatearr[0]
						this.historylist[i].effectiveDate_second = effectiveDatearr[1]
						//expiryDate
						if(this.historylist[i].expiryDate) {
							let expiryDatearr = this.historylist[i].expiryDate.split(" ")
							this.historylist[i].expiryDate_date = expiryDatearr[0]
							this.historylist[i].expiryDate_second = expiryDatearr[1]
						}
					}
					this.total = res.result.totalCount
				});
			},
			//搜索
			historysearch() {
				this.gethistorylist()
			},
			//商业
			prevpage() {

				this.$router.push({
					name: "policyupper1",
					query: {
						batchId: this.batchId
					}
				})
			},
			nextpage() {

				if(this.batchTypeId == "") {
					this.$message({
						message: '请选择模板',
						type: 'warning'
					});
				} else {
					let params = {
						batchId: this.batchId,
						batchType: this.batchType,
						batchTypeId: this.batchTypeId
					};
					this.post(params, "services/app/policy/SetBatchType").then(res => {

						if(this.batchType == 0 || this.batchType == 1) {
							this.$router.push({
								name: "policyupper3c",
								query: {
									batchId: this.batchId
								}
							})
						} else {
							this.$router.push({
								name: "policyupper3s",
								query: {
									batchId: this.batchId
								}
							})
						}
					});
				}

			}
		},
		components: {
			nextnav,
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 0 68px 0 68px;
		height: 100%;
		margin: 0 auto;
		.templates {
			width: 100%;
			.search {
				width: 100%;
				height: 28px;
				display: flex;
				justify-content: flex-start;
				font-size: 13px;
				margin-top: 19px;
				input {
					width: 250px;
					height: 100%;
					box-sizing: border-box;
					text-indent: 25px;
					border: 1px solid #EBECEE;
				}
				.btnsearch {
					width: 50px;
					height: 28px;
					box-sizing: border-box;
					background: #F7F7F7;
					border: 1px solid #DDDDDD;
					color: #666666;
					margin-left: 15px;
					border-radius: 5px;
				}
			}
		}
		.tabnav {
			width: 100%;
			height: 40px;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			margin-top: 30px;
			border-bottom: 1px solid #CBCBCB;
			cursor: pointer;
			.actives {
				background: url(../../assets/images/bomactive2x.png) center 31px no-repeat;
				color: #FF7819;
			}
			p {
				width: 150px;
				height: 100%;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.information {
			width: 100%;
			min-height: 120px;
			.add {
				width: 20px;
				height: 14px;
				background: #FF9430;
				border-radius: 8px;
				font-size: 10px;
				color: #FFFFFF;
				letter-spacing: 0;
				margin-left: 16.5px;
			}
			p {
				font-size: 14px;
				color: #333333;
				line-height: 20px;
			}
			.information_cont {
				width: 100%;
				height: 80px;
				background: #EAF5FB;
				margin-top: 20px;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: center;
				.information_top,
				.information_bom {
					width: 100%;
					height: 40px;
					display: flex;
					justify-content: flex-start;
					align-items: center;
					p {
						margin-left: 30px;
						font-size: 12px;
						.textname {
							color: #95BACC;
						}
						.textmodel {
							color: #40819E;
							.xian {
								margin-left: 10px;
								margin-right: 10px;
							}
						}
					}
					p:not(:first-of-type) {
						margin-left: 50px;
					}
				}
			}
		}
	}
	
	.paging {
		width: 100%;
		display: flex;
		justify-content: flex-end;
	}
	
	.batchconent {
		margin-top: 20px;
		width: 100%;
		min-height: 130px;
		overflow: hidden;
	}
	
	.batchconentleft {
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-left: -63px;
	}
	
	.batch {
		width: 204px;
		height: 90px;
		position: relative;
		border: 1px solid #D9D9D9;
		box-shadow: -1px -1px 3px 0 rgba(0, 0, 0, 0.10), 1px 1px 3px 0 rgba(0, 0, 0, 0.10);
		margin-bottom: 40px;
		margin-left: 63px;
		outline: none;
		cursor: pointer;
		.backgrounds {
			width: 100%;
			height: 10px;
			position: absolute;
			bottom: -10px;
			left: 0;
			background: url(../../assets/images/bomactive2x.png) top center no-repeat;
		}
		.batch_top {
			width: 100%;
			height: 68.5px;
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.namestext {
				width: 138px;
				height: 14px;
				font-size: 12px;
				color: #666666;
				text-align: center;
				margin-top: 10px;
				margin-bottom: 7px;
			}
			.timeconent {
				width: 185px;
				height: 31px;
				display: flex;
				justify-content: space-around;
				align-items: center;
				background: rgba(232, 232, 232, 0.50);
				border-radius: 5px;
				font-size: 10px;
				padding: 0 5px;
				color: #027DCA;
				p {
					flex: 5;
					text-align: center;
				}
				.division {
					flex: 1;
					margin: 0 5px;
					color: #AEAEAE;
				}
			}
			.isshow {
				position: absolute;
				top: 0px;
				left: 5px;
				width: 15px;
				height: 28px;
				background: #FB777D;
				color: #FFFFFF;
				font-size: 9px;
				display: flex;
				text-align: center;
				align-items: center;
				margin: 0;
			}
		}
		.batch_bom {
			height: 19.5px;
			width: 100%;
			box-sizing: border-box;
			border-top: 1px solid #E8E8E8;
			font-size: 11px;
			color: #027DCA;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	
	.activeclass {
		border: 1px solid #FF7819;
		box-shadow: -1px -1px 4px 0 rgba(255, 120, 25, 0.40), 1px 1px 4px 0 rgba(255, 120, 25, 0.40);
		.backgrounds {
			background: url(../../assets/images/bomactive2x.png) top center no-repeat;
		}
	}
	
	.btnnext {
		width: 100%;
		height: 32px;
		margin-top: 36px;
		margin-bottom: 30px;
		display: flex;
		justify-content: center;
		button {
			margin-right: 50px;
			width: 100px;
			height: 32px;
			background: #F7F7F7;
			border: 1px solid #DDDDDD;
			border-radius: 5px;
			font-size: 14px;
			color: #666666;
			outline: none;
			cursor: pointer;
		}
		.next {
			background: #FF7819;
			color: #FFFFFF;
		}
	}
	.nodata{
		width:100%;
		height:100px;
		display:flex;
		justify-content: center;
		align-items: center;
		color: #909399;
	}
</style>